<template>
  <teleport to="#chuLoading">
    <div class="chu-loading-container" :style="{backgroundColor:background}" ref="loadingRef" >
     <div>
        <!-- 判断是否用了插槽 -->
        <div v-if="$slots.default" class="chu-loading-content-container">
            <slot></slot>
        </div>
        <div v-else class="chu-loading-content-container">
          <div class="spinner-grow text-primary"></div>
          <div class="chu-loading-content-text">
            {{text}}
          </div>
        </div>
     </div>
   </div>
  </teleport>
</template>

<script lang='ts'>
import { getWheelSupportType } from '@/static/util/commonUtil'
import { defineComponent, nextTick, ref } from 'vue'
export default defineComponent({
  name: 'loading',
  props: {
    text: {
      type: String,
      default: '拼命加载中'
    },
    background: {
      type: String,
      default: 'rgba(0,0,0,0.7)'
    }
  },
  setup () {
    const node = document.createElement('div')
    node.id = 'chuLoading'
    document.body.appendChild(node)
    const support = getWheelSupportType()
    const loadingRef = ref()
    nextTick(() => {
      (loadingRef.value as HTMLElement).addEventListener(support, (e) => {
        e.preventDefault()
      })
    })
    return {
      loadingRef
    }
  }
})
</script>

 <style>
 .chu-loading-container{
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 100;
 }
 .chu-loading-content-container{
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
 }
 .chu-loading-content-text{
   margin-top: 10px;
   color: white;
 }
 </style>
